<template>
  <view class="container">
    <view class="list-container">
      <view 
        class="list-item" 
        v-for="(item, index) in doctorList" 
        :key="index"
        @tap="goToDoctorDetail(item)"
      >
        <image 
          :src="config.staticUrl + (item.imgUrl || '/static/images/default-avatar.png')" 
          mode="aspectFill" 
          class="item-image avatar"
        ></image>
        <view class="item-info">
          <view class="item-name-title">
            <text class="item-name">{{ item.name }}</text>
            <text class="item-title">{{ item.jobTitle }}</text>
          </view>
          <text class="item-sub-detail">{{ item.departmentName }} | {{ item.hospitalName }}</text>
          <text class="item-specialty">擅长：{{ item.professionalExpertise }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { selectDoctorByDepartmentId } from '@/api/doctor'
import { selectDepartmentAll } from '@/api/department'
import config from '@/config'

export default {
  data() {
    return {
      doctorList: [],
      searchHistory: [],
      config: config
    }
  },
  onLoad() {
    this.loadSearchHistory()
    this.loadDoctorList()
  },
  methods: {
    loadSearchHistory() {
      this.searchHistory = uni.getStorageSync('searchHistory') || []
    },
    async loadDoctorList() {
      try {
        let allDoctors = [];
        const deptRes = await selectDepartmentAll();

        if (deptRes.code === 200 && Array.isArray(deptRes.data)) {
          for (const dept of deptRes.data) {
            try {
              const res = await selectDoctorByDepartmentId(dept.id);
              if (res.code === 200 && Array.isArray(res.data)) {
                allDoctors = allDoctors.concat(res.data);
              }
            } catch (error) {
              console.error(`获取科室ID为 ${dept.id} 的医生失败:`, error);
              continue;
            }
          }
        }

        if (this.searchHistory.length > 0) {
          const filtered = allDoctors.filter(item => {
            return this.searchHistory.some(keyword => {
              const lowerCaseKeyword = keyword.toLowerCase();
              return ['name', 'jobTitle', 'departmentName', 'hospitalName', 'professionalExpertise'].some(field => {
                const value = item[field];
                return value && String(value).toLowerCase().includes(lowerCaseKeyword);
              });
            });
          });
          this.doctorList = filtered.length > 0 ? filtered : allDoctors;
        } else {
          this.doctorList = allDoctors;
        }
      } catch (error) {
        console.error('获取医生列表失败:', error);
        uni.showToast({
          title: '获取医生列表失败',
          icon: 'none'
        });
      }
    },
    goToDoctorDetail(item) {
      if (item.id) {
        uni.navigateTo({
          url: `/pages/hospital/doctor?id=${item.id}`,
          success: (res) => {
            res.eventChannel.emit('doctorData', item)
          }
        })
      }
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #F5F6FA;
  min-height: 100vh;
}

.list-container {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.list-item {
  display: flex;
  background-color: #FFFFFF;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  padding: 24rpx;
  align-items: center;
}

/* 浅色背景 */
/* .bg-doctor-light { background-color: #f9f0ff; } */

.item-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.item-image.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item-name-title {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.item-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-right: 12rpx;
}

.item-title {
  font-size: 24rpx;
  color: #666666;
  background-color: #F5F6FA;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  margin-left: 12rpx;
}

.item-sub-detail {
  font-size: 26rpx;
  color: #666666;
  margin-bottom: 4rpx;
}

.item-specialty {
  font-size: 24rpx;
  color: #999999;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style> 